<template>
	<div class="app-container">
		<el-card style="width: 100%; margin-bottom:20px;">
			<div style="display:flex; justify-content: space-between;">
				<div style=" display:flex; color:#787878; font-size:14px;">
					<div style="width: 240px; margin-right:40px;">
						状态
						<el-select v-model="statusIndex" placeholder="Select" size="large" style="width: 240px">
							<el-option label="不指定" :value="2" />
							<el-option label="已发布" :value="1" />
							<el-option label="未发布" :value="0" />
						</el-select>
					</div>
					<div style="width: 240px; margin-right:40px;">
						公告名称
						<el-input v-model="name" style="width: 240px" placeholder="公告名称" />
					</div>
					<div style="width: 240px; margin-top: 15px;">
						<el-button type="primary" size="small" class="bac6b7" @click.stop="getSuosou()">
							搜索
						</el-button>
					</div>
				</div>
				<div style=" display:flex; justify-content: flex-end; color:#787878; font-size:14px;">
					<div style="margin-top: 15px; margin-right: 20px;">
						<router-link to="/venue/noticeAdd">
							<el-button type="primary" class="bac6b7" size="small" icon="el-icon-user">
								新增公告
							</el-button>
						</router-link>
					</div>
				</div>
			</div>
		</el-card>
		<el-table v-loading="listLoading" :data="list" stripe class="wid100">
			<el-table-column label="公告名称">
				<template slot-scope="{row}">
					<span>{{ row.title }}</span>
				</template>
			</el-table-column>
			<el-table-column class-name="status-col" label="状态" width="100">
				<template slot-scope="{row}">
					<span>{{ row.state === 1?'已发布':'未发布' }}</span>
				</template>
			</el-table-column>
			<el-table-column label="发布时间" width="200">
				<template slot-scope="{row}">
					<span>{{ row.createtime }}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作" width="500">
				<template slot-scope="{row}">
					<el-button v-if="row.state === 1" class="bac6b7" type="primary" size="small" icon="el-icon-download"
						@click="xiaxian(row.id,0)">下线</el-button>
					<el-button v-else type="primary" class="bac6b7" size="small" icon="el-icon-upload2"
						@click="xiaxian(row.id,1)">上传</el-button>
					<router-link :to="'/venue/noticeDetail?id='+row.id" style="margin-left: 10px;">
						<el-button class="bac6b7" type="primary" size="small" icon="el-icon-edit">
							详情
						</el-button>
					</router-link>
					<router-link :to="'/venue/noticeEdit?id='+row.id" style="margin-left: 10px;">
						<el-button class="bac6b7" type="primary" size="small" icon="el-icon-edit">
							编辑
						</el-button>
					</router-link>
					<el-button type="primary" size="small" class="bac6b7" icon="el-icon-edit" style="margin-left: 10px;"
						@click="del(row.id)">
						删除
					</el-button>
					<!-- </router-link> -->
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
			@pagination="getList" />
	</div>
</template>

<script>
	import Pagination from '@/components/Pagination'
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import {
		noticeList,
		noticeAddEdit,
		noticeDel
	} from '@/api/staff' // Secondary package based on el-pagination
	export default {
		name: 'Notice',
		components: {
			Pagination
		},
		data() {
			return {
				list: null,
				total: 0,
				listLoading: true,
				listQuery: {
					page: 1,
					limit: 10
				},
				statusIndex: 2,
				name: ''
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '公告设置',
				url: '/venue/notice',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getList()
		},
		methods: {
			del(id) {
				console.log(id)
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					noticeDel({
						'id': id
					}).then(response => {
						this.getList()
					}).catch(error => {
						console.log(error)
					})
				}).catch(() => {})
			},
			xiaxian(id, type) {
				noticeAddEdit({
					'state': type,
					'id': id
				}).then(response => {
					this.getList()
				}).catch(error => {
					console.log(error)
				})
			},
			getSuosou() {
				this.listQuery.page = 1
				this.getList()
			},
			getList() {
				this.listLoading = true
				noticeList({
					'page': this.listQuery.page,
					'limit': this.listQuery.limit,
					'state': this.statusIndex,
					'keyword': this.name
				}).then(response => {
					const {
						data
					} = response
					if (response.code == 0) {
						this.total = response.data.total
						this.list = response.data.data
						this.listLoading = false
					}
				}).catch(error => {
					console.log(error)
					this.listLoading = false
				})
			},
			handleSelectionChange(val) {
				console.log(val.length)
				this.xuancount = val.length
				this.multipleSelection = val
			}
		}
	}
</script>

<style scoped>
	.edit-input {
		padding-right: 100px;
	}

	.cancel-btn {
		position: absolute;
		right: 15px;
		top: 10px;
	}

	.typelists {
		cursor: pointer;
		margin-right: 30px;
		margin-bottom: 10px;
		vertical-align: middle;
		font-size: 12px;
	}

	.typexuan {
		color: #41c3a8;
	}
</style>
